<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<title>element组件2</title>
<style>

.el-row{
margin-top:20px;
margin-bottom: 20px;

}
.el-col{
border-radius: 4px;
}
.content{
border-radius: 4px;
color:wheat;
text-align: center;
line-height: 50px;
background:OrangeRed;
min-height: 50px;
}

</style>

</head>
<body>
<div id="app">
<template v-for="(group,i) in groups">
<el-row :gutter="5">

<el-col v-for="student in group" :span=" parseInt(24/group.length)">
	<div class="content">{{student}}</div></el-col>
</el-row>

<el-button type="primary" @click="add(i)">添加学生</el-button>

</template>

</div>
<script>
new Vue({
el:'#app',
data:{
groups:[['张三','李四','王五'],['张三','李四','王五'],['张三','李四','王五']],
},

methods:{
add:function(i){
// console.log(i);
//点哪个按钮就加哪里的学生.
var student=prompt('请输入新学生的姓名');
// this.groups[i].push(student);

	if(this.groups[i].length<8){
						// this.group.push("张三")
							this.groups[i].push(student)
				}else{
					alert('每组最多8个学生')
				}
	

}

}

})

// if(this.group.length<8){
// 					// this.group.push("张三")
// 						this.group.push(student)
// 			}else{
// 				alert('每组最多8个学生')
// 			}

</script>
</body>
</html>
